<template>
  <div class="main">
    <div id="main" style="width: 600px;height:400px;"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { home } from "@/request/http";
export default {
  data() {
    return {
      userCount: 0,
      productCount: 0,
      orderCount: 0
    };
  },
  mounted() {
    home().then(res => {
      const { userCount, productCount, orderCount } = res.data.data;
      this.userCount = userCount;
      this.productCount = productCount;
      this.orderCount = orderCount;
    });
    let stm = setTimeout(() => {
      this.getecharts();
      clearTimeout(stm);
    }, 20);
  },
  methods: {
    getecharts() {
      echarts.init(document.getElementById("main")).setOption({
        title: {
          text: "用户，订单，商品一览",
          subtext: "来源：本站数据接口",
          left: "center"
        },
        series: {
          type: "pie",
          radius: "60%",
          center: ["50%", "60%"],
          data: [
            { name: "用户总数", value: this.userCount },
            { name: "商品总数", value: this.productCount },
            { name: "订单总数", value: this.orderCount }
          ]
        }
      });
    }
  }
};
</script>
<style>
</style>
